<template>
	<view class="machine-side">
		<view class="machine-arm" :style="{'transform' : 'rotate(' + machine_side_arm_rotate + 'deg)'}">
			<u-image :src="'/static/machine/side/arm/'+armImageIndex+'.png'" style="width:100%;height:100%" mode="fit"
				:lazy-load="false" :fade="false" />
		</view>
		<view class="machine-body">
			<u-image :src="`/static/machine/side/body/${bodyImageIndex}.png`" style="width:100%;height:100%" mode="fit"
				:lazy-load="false" :fade="false" />
		</view>
		<view class="machine-bracket" :style="{'transform' : 'rotate(' + machine_side_bracket_rotate + 'deg)'}">
			<u-image :src="`/static/machine/side/board.png`" style="width:100%;height:100%" mode="fit"
				:lazy-load="false" :fade="false" />
		</view>
	</view>
</template>

<script>
	var interval_working = null
	var interval_shoveling = null
	export default {
		name: "machine-side",
		data() {
			return {
				armImageIndex: 0,
				bodyImageIndex: 0,
				machine_side_arm_rotate: 0,
				machine_side_bracket_rotate: 0
			};
		},
		mounted() {},
		methods: {
			//start digging hole
			startDigging() {
				if (interval_working !== null) return
				interval_working = setInterval(() => {
					this.armImageIndex = (this.armImageIndex + 1) % 6
				}, 180)
			},
			stopDigging() {
				if (interval_working === null) return
				clearInterval(interval_working)
				interval_working = null
			},
			bracketDown() {
				this.bodyImageIndex = 0
			},
			bracketHalfUp() {
				this.bodyImageIndex = 2
			},
			bracketFullUp() {
				this.bodyImageIndex = 1
			}
		}
	}
</script>

<style lang="scss">
	.machine-side {
		position: relative;
		height: 480rpx;
		width: 100vw;
		// background: red; 

		.machine-arm {
			width: 298rpx;
			height: 62rpx;
			z-index: 2;
			transform-origin: right center;
			position: absolute;
			left: 20upx;
			bottom: 115rpx;
			// background-color: green;
		}

		.machine-body {
			// background-color: yellow;
			width: 568rpx;
			height: 210rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
		}

		.machine-bracket {
			width: 144rpx;
			height: 82rpx;
			position: absolute;
			left: 112rpx;
			bottom: 36rpx;
			z-index: 2;
			transform-origin: right top;
		}

		.buttons {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
</style>
